<!-- jvq maps section start -->
<section id="jvq-maps">
    <!-- Continents -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Continents</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body height-400">

                        <div id="continents">

                            <!-- Asia -->
                            <h4 id="asia" class="continent-tab">Asia</h4>
                            <div class="continent-map">
                                <div id="continent-asia" class="jqvmap-area"></div>
                            </div>

                            <!-- Europe -->
                            <h4 id="europe" class="continent-tab">Europe</h4>
                            <div class="continent-map">
                                <div id="continent-europe" class="jqvmap-area"></div>
                            </div>

                            <!-- Australia -->
                            <h4 id="australia" class="continent-tab">Australia</h4>
                            <div class="continent-map">
                                <div id="continent-australia" class="jqvmap-area"></div>
                            </div>

                            <!-- Africa -->
                            <h4 id="africa" class="continent-tab">Africa</h4>
                            <div class="continent-map">
                                <div id="continent-africa" class="jqvmap-area"></div>
                            </div>

                            <!-- North America -->
                            <h4 id="northamerica" class="continent-tab">North America</h4>
                            <div class="continent-map">
                                <div id="continent-northamerica" class="jqvmap-area"></div>
                            </div>

                            <!-- South America -->
                            <h4 id="southamerica" class="continent-tab">South America</h4>
                            <div class="continent-map">
                                <div id="continent-southamerica" class="jqvmap-area"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Multi Select Region -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Multi Select Region</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body height-400">
                        <div id="multi-select-region" class="jqvmap-area"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Custom Pins -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Custom Pins</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body height-400">
                        <div id="custom-pins" class="jqvmap-area"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Inactive Regions -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Inactive Regions</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div id="inactive-regions" class="height-400"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- World Map -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">World Map</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body height-400">
                        <div id="world-map" class="jqvmap-area"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- // jvq maps section end -->